<!--筛选弹窗组件-->
<template>
	<van-popup v-model="showScreen" position="right" class="screen-popup" :close-on-click-overlay="false"
		@click-overlay="clickOverlay">
		<view class="screen-popup-content-main">
			<view class="screen-type-item" v-for="(typeItem, typeIndex) in typeList" :key="typeIndex">
				<plateTitle :title="typeItem.name" :isRequired="false" class="plate-title" />
				<!-- data-value -->
				<view class="screen-option-container">
					<view class="screen-option-item"
						:class="{active: selected[typeItem.type] && selected[typeItem.type].includes(item.dictCode)}"
						v-for="(item,index) in typeItem.child" :key="index" @click="select(typeItem, item)">
						{{ item.dictLabel }}
					</view>
				</view>
			</view>

			<slot></slot>

		</view>


		<view class="btn-container">
			<van-button block type="info" color="#417ADC" plain @click="clickOverlay">取消</van-button>
			<van-button block type="info" color="#417ADC" @click="screenConfirm">确认</van-button>
		</view>
	</van-popup>
</template>

<script>
	import { constant } from 'lodash';
import plateTitle from '../../../components/business/plateTitle.vue';
	export default {
		name: "screen",
		components: {
			plateTitle
		},
		props: {
			typeList: {
				type: Array,
				required: true,
			},
			showScreen: {
				type: Boolean,
				required: true,
			},
			multipleChoice: {
				type: Boolean,
				required: false,
				default: false
			}
		},
		watch: {
			typeList: {
				deep: true,
				immediate: true,
				handler: function(newVal) {
					this.selected = newVal.reduce((prev, item) => {
						// 默认选择全部
						prev[item.type] = [item.child[0].dictCode];
						return prev;
					}, {})
				}
			}
		},
		onLoad() {
			console.log(this.selected,'selected')
		},
		data() {
			return {
				selected: {}, // 已选
			}
		},
		methods: {
			select(typeItem, seletedItem) {
				const selectedArr = this.selected[typeItem.type]
				if (!this.selected[typeItem.type]) {
					this.$set(this.selected, typeItem.type, [seletedItem.dictCode])
				} else {
					const index = this.selected[typeItem.type].indexOf(seletedItem.dictCode)
					if (index === -1) {
						// 多选
						if (this.multipleChoice) {
							// 第一次点击其他的
							const isAll = this.selected[typeItem.type].includes(-1)
							if (seletedItem.dictCode === -1) {
								if (!isAll) {
									this.selected[typeItem.type] = [-1]
								}
							} else {
								if (isAll) {
									this.selected[typeItem.type] = [seletedItem.dictCode]
								} else {
									const index = this.selected[typeItem.type].indexOf(seletedItem.dictCode)
									if (index !== -1) {
										this.selected[typeItem.type].splice(index, 1)
									} else {
										this.selected[typeItem.type].push(seletedItem.dictCode)
									}
								}
							}
						} else {
							// 单选
							this.selected[typeItem.type] = [seletedItem.dictCode]
						}
					} else {
						this.selected[typeItem.type].splice(index, 1)
					}
				}
			},
			closePopup() {
				this.$emit('closePopup', false);
			},
			clickOverlay() {
				this.closePopup()
			},
			screenConfirm() {
				this.closePopup()
				this.$emit('confirm', this.selected)
			}
		}
	};
</script>

<style scoped lang="scss">
	.screen-popup {
		width: px2vw(820);
		// height: calc(100vh - #{px2vh(212)});
		padding: px2vh(162) px2vw(40) px2vh(50);

		.screen-popup-content-main {
			min-height: calc(100vh - #{px2vh(342)});
			padding-bottom: px2vh(30);

			.screen-type-item {
				margin-bottom: px2vh(30);

				.plate-title {
					margin-bottom: px2vh(36);
				}

				.screen-option-container {
					display: flex;
					//justify-content: space-between;
					flex-wrap: wrap;

					.screen-option-item {
						width: px2vw(260);
						height: px2vh(90);
						margin-bottom: px2vh(20);
						line-height: px2vh(90);
						background: #f7f7f7;
						color: #666;
						font-size: px2vh(36);
						text-align: center;
						border-radius: $border-radius-base;
					}

					.screen-option-item:not(:nth-child(3n)) {
						margin-right: px2vw(20);
					}

					.screen-option-item.active {
						background: #ecf1fb;
						color: #417ADC;
					}
				}
			}
		}

		.btn-container {
			width: 100%;
			height: px2vh(200);
			background-color: #fff;
			display: flex;
			// justify-content: space-between;
			position: sticky;
			// bottom: px2vh(-50);
			bottom: 0;
			left:0;
			padding-top: px2vh(10);
			.van-button {
				height: px2vh(100);
				margin-right: px2vw(30);
				border-radius: $border-radius-base;
			}

		}
	}
</style>